<!--分类字典树-->
<template>
  <div id="cmsSpecialCategory" class="app-container">
    <div class="common-title">
      <h2>{{ name }}</h2>
      <span class="options">
        <el-tooltip class="item" effect="dark" content="刷新" placement="bottom">
          <i class="el-icon-refresh" style="margin-right: 8px" @click="fetchData" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="name+'管理'" placement="bottom">
          <i class="el-icon-setting" @click="handleGo" />
        </el-tooltip>
      </span>
    </div>
    <el-input v-model="searchValue" :placeholder="'请输入'+name+'名称'" style="margin-top: 10px" />
    <el-tree
      ref="tree"
      v-loading="treeLoading"
      class="common-el-tree tree-active"
      :data="treeDatas"
      :props="defaultTreeProps"
      node-key="id"
      :filter-node-method="onTreeFilter"
      :expand-on-click-node="false"
      :current-node-key="nodeSelectedKey"
      @node-click="handleNodeClick">
      <span slot-scope="{ data}" class="custom-tree-node">
        <span class="text">{{ data.name }}</span>
      </span>
    </el-tree>
    <category-dict-editor-dialog ref="categoryDictEditor" />
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      required: true
    },
    name: {
      type: String,
      default: '分类字典'
    },
    level: {
      type: Number,
      default: 10
    }
  },

  data() {
    return {
      nodeSelectedKey: '',
      defaultTreeProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      searchValue: '',
      treeDatas: [],
      treeLoading: false
    }
  },
  watch: {
    searchValue(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleGo() {
      this.$nextTick(() => {
        this.$refs.categoryDictEditor.init(this.type, this.name, this.level)
      })
    },
    handleNodeClick(data) {
      this.nodeSelectedKey = data.id
      this.$refs.tree.setCurrentKey(data.id)
      this.$emit('change', data)
    },

    /* 节点过滤函数 */
    onTreeFilter(value, data) {
      if (!value) return true
      return data[this.defaultTreeProps.filter]
        ? data[this.defaultTreeProps.label].indexOf(value) !== -1 ||
              data[this.defaultTreeProps.filter].indexOf(value.toUpperCase()) !==
                -1
        : data[this.defaultTreeProps.label].indexOf(value) !== -1
    },
    async fetchData() {
      this.searchValue = ''
      this.treeLoading = true
      const response = await this.$store.dispatch('upmsCategoryDictCacheTreeByType', this.type)
      this.treeLoading = false
      this.treeDatas = [{
        id: 0,
        treeNumber: '',
        name: '全部'
      }, ...response]
      if (this.treeDatas.length > 0) {
        this.nodeSelectedKey = this.treeDatas[0].id
        this.$emit('change', this.treeDatas[0])
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.treeDatas[0].id)
        })
      } else {
        this.$emit('change', { id: 0, name: '全部' })
      }
    }
  }
}
</script>
  <style lang="scss" scoped>
  </style>

